<template>
    <el-table
            class="TableList"
            :data="data"
            style="width: 100%;"
            v-loading="loading"
            @selection-change="selectChange"
    >
        <el-table-column
                width="40"
                fixed
                type="selection"
        ></el-table-column>
        <el-table-column
                type="index"
                fixed
                label="序号"
        ></el-table-column>
        <slot></slot>
    </el-table>
</template>

<script lang="ts">
import { Component, Prop, Watch, Vue } from 'vue-property-decorator'

@Component({
  components: {}
})
export default class TableList extends Vue {
  @Prop({
    default() {
      return []
    }

  })
  readonly data!: any
  @Prop({
    default: false
  })
  readonly value!: any
  loading: any = this.value

  mounted() {
    this.reload()
  }

  activated() {}

  reload() {}

  selectChange(nodes, keys) {
    this.$emit('selection-change', nodes, keys)
  }

  @Watch('loading')
  onLoadingChanged(v) {
    this.$emit('input', v)
  }

  @Watch('value')
  onValueChanged(v) {
    this.loading = v
  }

}
</script>

<style lang="less" scoped>
    @import (reference) "~@/style/all.less";

    .TableList {
    }
</style>